<!--
描述：硬件管理-硬件信息-检测历史
开发人：fwb
开发日期：2017年8月22日
-->
<template lang="pug">
    kalix-dialog.user-add(bizKey="hardwarelog" ref="kalixBizDialog"
    v-bind:submitCustom="submitCustom" v-bind:form-model.sync="formModel" v-bind:targetURL="targetURL")
        div.el-form(slot="dialogFormSlot")
            div(class="test" v-for='(item,index) in items')
                div(v-for="(data, key) in item") {{divLoad(data,key)}}
                    div.s-flex(v-if="formModel[key]")
                        el-form-item.s-flex_item(v-bind:label="data.name" label-width="120px")
                            el-input(v-bind:type="data.type" v-bind:id="data.id" v-bind:placeholder="data.desc" v-model="formModel[key].value")
                        div.popover
                            kalix-help(v-bind:popover="popover" v-bind:placement="placement" v-bind:classname="classname" v-bind:title="data.desc" v-bind:trigger="trigger")
</template>
<script type="text/ecmascript-6">
    import FormModel from './model'
    import {configAdminURL, configName} from '../../config.toml'
    import {ON_REFRESH_DATA} from '../../../../../components/corelib/components/common/event.toml'

    export default {
      name: 'AdminConfigureView',
      data() {
        return {
          formModel: Object.assign({}, FormModel),
          targetURL: configAdminURL,
          configName: configName,
          items: {},
          popover: 'popover',
          placement: 'top-start',
          classname: 'el-icon-question',
          trigger: 'hover'
        }
      },
      created() {
        console.log('this.formModel : ', this.formModel.classType)
      },
      mounted() {
      },
      methods: {
        divLoad(_data, _key) {
          this.formModel[_key] = _data
          console.log('divLoad', _data, _key)
        },
        submitCustom(baseDialog) {
          baseDialog.$refs.dialogForm.validate((valid) => {
            if (valid) {
              this.$http.request({
                method: 'POST',
                url: baseDialog.targetURL,
                params: {
                  content: baseDialog.formModel,
                  configName: this.configName
                }
              }).then(response => {
                if (response.data.success) {
                  // this.$KalixMessage.success(response.data.msg)
                  baseDialog.visible = false
                  baseDialog.$refs.dialogForm.resetFields()
                  baseDialog.submitComplete()
                  this.$KalixMessage.success('保存成功')
                  // 关闭对话框
                  baseDialog.close()
                  // 清空form
                  //   baseDialog.$parent. .resetDialogForm()
                  //   baseDialog.$emit('resetDialogForm')
                } else {
                  this.$KalixMessage.error('保存失败')
                  baseDialog.submitComplete()
                }
                // 刷新列表
                this.$KalixEventBus.$emit(ON_REFRESH_DATA)
                baseDialog._afterDialogClose()
                console.log('[kalix] dialog submit button clicked !')
                baseDialog.visible = false
              })
            } else {
              // this.$KalixMessage.error('请检查输入项！')
              baseDialog.submitComplete()
              return false
            }
          })
        },
        listen(oldValue, newValue) {
          console.log('===================[formModel]:', this.formModel)
          // console.log('valid--------------->', encodeURIComponent(this.keyValue))
          this.axios.request({
            method: 'GET',
            url: this.targetURL + '/' + this.formModel.classType,
            params: {configName: this.configName},
            dataType: 'json',
            data: {}
          }).then(response => {
            if (response.data) {
              this.items = response.data.data
            } else {
              // this.$KalixMessage.success('重置失败')
            }
          }).catch(() => {
          })
        }
      },
      watch: {
        formModel: {
          deep: true,
          handler: 'listen'
        }
      }
    }
</script>

<style scoped lang="stylus">
    .el-form
        padding 30px 70px 30px 20px

    .popover
        height 40px
        display flex
        align-items center
        padding-left 16px
        font-size 20px
</style>
